<template>
  <el-tabs type="border-card">
    <el-tab-pane label="加密">
      <el-form>
        <el-form-item label="请输入需要加密的字符串：" label-width="200px">
          <el-input v-model="beforeEncryption" size="small" placeholder="请输入内容" style="width: 400px"></el-input>
          <!--还提供了 medium、small 和 mini 三种尺寸。-->
        </el-form-item>

        <el-form-item label="加密后：" label-width="200px">
          <el-input v-model="encrypted" size="small" placeholder="请输入内容" style="width: 400px"></el-input>
          <!--还提供了 medium、small 和 mini 三种尺寸。-->
        </el-form-item>
      </el-form>
      <el-button @click="encryption">确定</el-button>
    </el-tab-pane>

    <el-tab-pane label="解密">
      <el-form>
        <el-form-item label="请输入需要解密密的字符串：" label-width="200px">
          <el-input v-model="beforeDecryption" size="small" placeholder="请输入内容" style="width: 400px"></el-input>
          <!--还提供了 medium、small 和 mini 三种尺寸。-->
        </el-form-item>

        <el-form-item label="解密后：" label-width="200px">
          <el-input v-model="decrypted" size="small" placeholder="请输入内容" style="width: 400px"></el-input>
          <!--还提供了 medium、small 和 mini 三种尺寸。-->
        </el-form-item>
      </el-form>
      <el-button @click="decryption">确定</el-button>
    </el-tab-pane>

  </el-tabs>
</template>

<script>
import CryptoJS from "crypto-js"

export default {
  name: "AES",
  data() {
    return {
      beforeEncryption: "",
      encrypted: "",
      beforeDecryption: "",
      decrypted: "",
    }
  },

  methods: {

    encryption() {
      let key = "ASDFGHJKLzxc_Key"
      let iv = "ASDFGHJKLzxc_ivk"
      this.encrypted = this.aesMinEncrypt(key, this.beforeEncryption)

    },
    decryption() {
      let key = "ASDFGHJKLzxc_Key"
      let iv = "ASDFGHJKLzxc_ivk"
      this.decrypted = this.aesMindecryption(key, this.beforeDecryption)

    },

    /**
     * @author yzh
     * @time 2023/6/6
     * 加密
     */
    aesMinEncrypt(key, word) {
      let srcs = CryptoJS.enc.Utf8.parse(word)
      let encrypted = CryptoJS.AES.encrypt(srcs, key, {mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7})
      return encrypted.toString()
    },

    /**
     * @author yzh
     * @time 2023/6/6
     * 解密
     */
    aesMindecryption(key, word) {
      let decrypt = CryptoJS.AES.decrypt(word, key, {mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7})
      let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8)
      return decryptedStr.toString()
    },

    /**
     * 加密方法
     * 另一种写法
     */
    aesEncrypt(key, iv, word) {
      var _word = CryptoJS.enc.Utf8.parse(word),
          _key = CryptoJS.enc.Utf8.parse(key),
          _iv = CryptoJS.enc.Utf8.parse(iv);
      var encrypted = CryptoJS.AES.encrypt(_word, _key, {
        iv: _iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7
      });
      return encrypted.toString();
    },

  }
}
</script>

<style scoped>

</style>
